<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/shop_add_img.css">
    <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <title>添加商品图片</title>
</head>

<body>
  <div class="vue-content">
	<div class="header navigationBar">
      	<div class="wrapper">
          	<span id="btn-back" class="header-btn left-btn backtrack" @click="close()"></span>
          	<span class="title">添加商品图片</span>
          	<span class="right-btn" id="shopAddImgSave" @click="uploadImgSave()">保存</span>
      	</div>
  	</div>
   	<div class="container top-container">
   		<div class="swiper-container shop_add_img" id="swiperContainer">
    		<div class="swiper-wrapper" id="shopAddImgSlider" style="position: absolute">
	    		<div class="swiper-slide" v-for="(item,index) in swiperImageArr">
	    			<img :src="item+'?x-oss-process=image/resize,m_lfit,w_960'"/>
            <span class="del_class" @click="swiperSliderDel(index)">
              <span>x</span>
            </span>
	    		</div>
			</div>
      <div class="swiper-pagination swiper-pagination-fraction" v-if="swiperImageArr.length"></div>

			<!-- <div class="swiper-pagination-number" id="swiperNumber">
				<span id="swiperPaginationActive" >1</span>/<span id="swiperPaginationTotal">0</span>
			</div> -->
		</div>
		<div class="shop_add_img_small">
      <p>为方便展示，请上传长宽比相同的图片</p>
			<p>可以拖动图片调整顺序</p>
			<div class="shop_add_img_box" id="listWithHandle" class="list-group">
				<div v-for="(item,index) in imgArr" class="list-group-item">
					<img :src="item+'?x-oss-process=image/resize,m_lfit,w_960'" class='imgClass' :moveindex='index'/>

				</div>
				<div class="shop_add_img_file" v-if="num<8" @click="getPictureS()">
					<!-- <input type="file" name="" value="" id="swiperSliderUpload"/> -->
					添加商品细节图
				</div>
			</div>
		</div>
   	</div>
    </div>
</body>

<script src="../../sea.js" data-main="../../main"></script>
<script type="text/javascript" src="../../vue.js"></script>
<script src="../../Sortable.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
<script type="text/javascript" src="./js/shopAddImgManage.js"></script>

</html>
